<!DOCTYPE html>
<html lang="en">
<head>
	
	<meta charset="utf-8">
	<title>sample1</title>
	
	<script type="text/javascript" src="../utils.js"></script>
	<script type="text/javascript" src="../nd.js"></script>
	<script type="text/javascript" src="../mvc.js"></script>
	
	<script type="text/javascript" src="assets.js"></script>
	<script type="text/javascript" src="Sample1.js"></script>
	
	<style type="text/css">
	
		#layer1, #layer2
		{
			position: absolute;
			top: 50px;
			left: 0;
		}
		
	</style>
	
</head>
<body>
	
	
	
	Zoom: <input type="range" id="zoom" name="zoom" min="10" max="800"  value="100" />
	rotationX: <input type="range" id="rotationX" name="rotationX" min="0" max="360" value="0" />
	rotationY: <input type="range" id="rotationY" name="rotationY" min="0" max="360" value="0" />
	rotationZ: <input type="range" id="rotationZ" name="rotationZ" min="0" max="360" value="0" />
	x: <input type="range" id="moveX" name="moveX" min="-200" max="5760" value="0" />
	y: <input type="range" id="moveY" name="moveY" min="-200" max="4320" value="0" />
	
	<!--enable draw: <input type="checkbox" id="enableDraw" name="enableDraw" checked="true" /-->
	<canvas id="layer1" width="640" height="480"></canvas>
	<canvas id="layer2" width="640" height="480"></canvas>
	
</body>
</html>